<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script type="application/javascript">
        function client() {
            var newList = new Array()
            newList[0] = 1;
            for (var i = 0; i < newList.length; i++) {
                document.write(newList[i])
            }

        }
        function validate_required(field, alerttxt) {
            with (field) {
                if (value == null || value == "") {
                    alert(alerttxt);
                    return false
                }
                else {
                    return true
                }
            }
        }
        function validate_form(thisform) {
            with (thisform) {
                if(validate_required(email,'qingshurushuju')==false){
                    email.focus();
                    return false;
                }
            }
        }

    </script>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Apple公司</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">iMac</a></li>
                    <li><a href="#">iPad</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <span>iPhone</span>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">iPhone-5</a></li>
                            <li><a href="#">iPhone-6s</a></li>
                            <li><a href="#">iPhone-7</a></li>
                            <li><a href="#">iPhone-8</a></li>
                            <li class="divider"></li>
                            <li><a href="#">iPhone-X</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-lg-4 bg-info">
            <p>sxnjsnxjs</p>
            <h1 id="titleone">我是标题1 h1
                <small class="text-danger">副标题h1.1</small>
            </h1>
            <h2 id="titletwo">我是标题2 h2</h2>
            <script type="application/javascript">
                document.getElementById('titletwo').style.color='red'
            </script>
            <h3>我是标题3 h3
                <small>副标题h3.1</small>
            </h3>
            <h4 id="titlefour">我是标题4 h4</h4>
            <input type="button" value="实验" onclick="document.getElementById('titlefour').style.color='blue'">
            <span class="glyphicon glyphicon-user"></span>User
            <form id="test" role="form">
                <input type="email" name="email" value="youjian" onsubmit="validate_form(this)">
                <input type="submit" value="tijiao">
            </form>
        </div>
        <div class="col-lg-4">
            <p>zhanwei</p>
            <p class="text-left">sssss</p>
            <p class="text-right">rrrr</p>
            <abbr class="active" title="world well">我所缩写 谢谢我所缩写 谢谢我所缩写 谢谢我所缩写 谢谢我所缩写 谢谢我所缩写 谢谢我所缩写 谢谢</abbr><br>
            <abbr title="thinking_fioa" class=".initialism">TF</abbr>
            <form role="form">
                <div class="form-control-static">
                    <input type="text" value="请输入数据">
                    <input type="datetime-local" id="time" value="shijian">
                    <input id="ww" type="button" class="text-warning active" value="waring">
                </div>
            </form>
        </div>
        <div class="col-lg-4">
            <blockquote>
                一个带有源标题的引用
                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
            <blockquote class="pull-right">
                一个向右对齐的标题引用
                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
            <br>
            <h4>有序列表</h4>
            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ol>
            <h4>无序列表</h4>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
            <h4>未定义样式列表</h4>
            <ul class="list-unstyled">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
            <h4>内联列表</h4>
            <ul class="list-inline">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
            <h4>定义列表</h4>
            <dl>
                <dt>Description 1</dt>
                <dd>Item 1</dd>
                <dt>Description 2</dt>
                <dd>Item 2</dd>
            </dl>
            <h4>水平的定义列表</h4>
            <dl class="dl-horizontal">
                <dt>Description 1</dt>
                <dd>Item 1</dd>
                <dt>Description 2</dt>
                <dd>Item 2</dd>
            </dl>


        </div>
    </div>
</div>


</body>
</html>